<template>
  <div class="login-container">
    <!-- 颜色拾取器 -->
    <!-- <top-color v-show="false"></top-color> -->
    <ul class="login-top">
      <li><img :src="require('../../../public/img/logo.png')" /></li>
      <li>深中笃行</li>
      <li>履践致远</li>
      <li>因势而新</li>
      <li>敦品于工</li>
    </ul>
    <div class="login-weaper animated bounceInDown">
      <!-- <div class="login-small-title">办公登录系统</div> -->
      <div class="login-border">
        <div class="login-main">
          <div class="forgetPassword" v-show="activeName == 'forget'">
            <a @click="toBackLogin"><span class="el-icon-arrow-left"></span>返回登录</a>
          </div>
          <div class="tab" v-show="activeName != 'forget'">
            <div @click="selectLogin(1)" :class="{ active: tabIndex == 1 }">手机号登录</div>
            <div @click="psdLogin(2)" :class="{ active: tabIndex == 2 }">密码登录</div>
          </div>
          <div v-if="website.tenantEnabled">
            <tenantUserLogin v-if="activeName === 'user'"></tenantUserLogin>
            <tenantCodeLogin v-else-if="activeName === 'code'"></tenantCodeLogin>
            <forgetPass v-else-if="activeName === 'forget'"></forgetPass>
          </div>
        
          <!-- 登陆 -->
          <div v-else>
            <codeLogin v-if="activeName === 'code'"></codeLogin>
            <userLogin v-else-if="activeName === 'user'"></userLogin>
            <forgetPass v-else-if="activeName === 'forget'"></forgetPass>
          </div>
          <!-- <div class="submit_btn"></div> -->
         
          <!-- <div class="changeLogin" v-show="activeName != 'forget'&&tabIndex == 2">
         
            <a @click="forgetPassword">忘记密码</a>
          </div> -->

          <!-- <div class="agreement">登录即代表你同意<a href="http://phone.tailan.xyz/resource/agreement/index.html"
              target="_blank">用户协议</a>和<a href="http://phone.tailan.xyz/resource/privacy/privacy.html"
              target="_blank">隐私政策</a></div> -->
          <!-- <div class="login-menu" v-show="activeName != 'forget'">
            <a href="#" @click.stop="activeName = 'user'">
              账号登陆
            </a>
            <a href="#" @click.stop="activeName = 'code'">
              手机号登陆
            </a>
          </div> -->
          <!-- <a class="f_passworld" href="#" @click="activeName = 'forget'" v-show="activeName != 'forget'">
            {{$t('forgetPass.forgetPWD')}}
          </a>
          <a class="f_passworld" href="#" @click="activeName = historyCode" v-show="activeName == 'forget'" >
            {{$t('forgetPass.returnLogin')}}
          </a> -->
        </div>
      </div>
      <!-- <div class="login_foot" style="color:#ccc">
          {{ website.copyright }}
          <br>
          <a style="color:#ccc" href="https://beian.miit.gov.cn" target="_blank">京ICP备2022012565号-1</a>
      </div> -->
    </div>
  </div>
</template>
<script>
import userLogin from "./userlogin";
import tenantUserLogin from "./tenantuserlogin";
import codeLogin from "./codelogin";
import thirdLogin from "./thirdlogin";
import faceLogin from "./facelogin";
import { mapGetters } from "vuex";
import { dateFormat } from "@/util/date";
import { validatenull } from "@/util/validate";
import topLang from "@/page/index/top/top-lang";
import topColor from "@/page/index/top/top-color";
import tenantCodeLogin from "./tenantcodelogin";
import forgetPass from "./forgetPass";
import website from '@/config/website'
import { getStore } from '@/util/store'
export default {
  name: "login",
  components: {
    userLogin,
    codeLogin,
    thirdLogin,
    faceLogin,
    topLang,
    topColor,
    tenantUserLogin,
    tenantCodeLogin,
    forgetPass
  },
  data() {
    return {
      time: "",
      activeName: "",
      historyCode: "code",
      loginWays: '账号登陆',
      tabIndex: 1
    };
  },
  watch: {
    $route() {
      const params = this.$route.query;
      this.socialForm.state = params.state;
      this.socialForm.code = params.code;
      if (!validatenull(this.socialForm.state)) {
        const loading = this.$loading({
          lock: true,
          text: `${this.socialForm.state === "WX" ? "微信" : "QQ"
            }登录中,请稍后。。。`,
          spinner: "el-icon-loading"
        });
        setTimeout(() => {
          loading.close();
        }, 2000);
      }
    }
  },
  created() {

    this.getTime();
    setInterval(() => {
      this.getTime();
    }, 1000);
  },
  mounted() {
    this.$store.commit("SET_THEME_NAME", getStore({ name: 'themeName' }) || website.defaultTheme);
    this.$store.commit("SET_MENULAYOUT", ['lightTheme', 'default'].includes(getStore({ name: 'themeName' }) || website.defaultTheme) ? false : true);
    this.init()
  },
  computed: {
    ...mapGetters(["website"])
  },
  props: [],
  methods: {
    getTime() {
      this.time = dateFormat(new Date());
    },
    // 手机号登录
    selectLogin(val) {
      if (this.activeName == 'user') {
        this.activeName = 'code'
        this.loginWays = '账号登陆'
        this.tabIndex = val
      }
    },
    // 密码登录
    psdLogin(val) {
      if (this.activeName == 'code') {
        this.activeName = 'user'
        this.loginWays = '手机登陆'
        this.tabIndex = val
      }

    },
    forgetPassword() {
      if (this.activeName != 'forget') {
        this.activeName = 'forget'
      }
    },
    toBackLogin() {
      this.activeName = 'code'
      this.tabIndex = 1
    },
    init() {
      this.activeName = 'code'
    },
  }
};
</script>
<style lang="scss" scoped>
ul,
li {
  margin: 0;
  padding: 0;
  list-style: none
}

@import "@/styles/login.scss";

.changeLogin {
  
  text-align: center;
  position:absolute;
}

.el-form-item {
  margin-top: 0;
  margin-bottom: 40px !important;
}

@media screen and (max-width: 1440px) {
  .changeLogin {
    bottom: 218px;
  }

  .el-form-item {
    margin-bottom: 20px !important;
  }
}

.agreement {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 14px;
}

.agreement a {
  color: #0063f5;
}

.login-top {
  position: absolute;
  top: 30px;
  left: 60px;
  display: flex;
  align-items: center;

  li {
    padding: 0 15px;
    font-size: 18px;
    color: #DEDEDE;
    position: relative;
  }

  li:first-child::after {
    display: none;
    padding-left: 0;
  }

  li:last-child::after {
    display: none;
  }

  li::after {
    content: '';
    position: absolute;
    font-size: 20px;
    top: 47%;
    right: 0;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #DEDEDE;
  }

  li img {
    width: 180px;
    height: 50px;
  }
}

.changeLogin>a {
  font-size: 14px;
  color: #0063f5;
  line-height: 30px;
}

.changeLogin>a:hover {
  cursor: pointer;
}

.forgetPassword {
  cursor: pointer;
  display: flex;
  align-items: center;
  height: 30px;
  margin-bottom: 30px;
}

.forgetPassword>a {
  font-size: 18px;
  color: #222222;
  line-height: 30px;
}
</style>
